<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <!-- import CSS -->
    <link rel="stylesheet" href="https://cdn.staticfile.org/element-ui/2.15.9/theme-chalk/index.css">
    <!-- import CSS  swiper样式-->
    <link rel="stylesheet" href="../dist/idangerous.swiper.css">
    <link rel="stylesheet" href="../mycs/mycs.css">
    <style>
        /*提取样式*/
        .dmg{
        padding: 0;margin: 0;
        }
        info{
            padding: 0;margin: 0;
        }
        info>data{

            text-align: left;
            position: relative;
        }
        info>title{

        }
        info>none{
            text-decoration: none;margin: 0;padding: 0;text-align: left
        }
.zhtxt{
    color: white;
}
.entxt{
    color: white;
    font-size: 5px;
}
.swiper-wrapper{
    width: 100%;
    height:300px;
}
.titbox{
    position: fixed;
    top:375px;
    left: 580px;
}
        .swiper-button-prev {

            display: inline-block;
            width: 30px;
            height: 30px;
            background: url(../imgs/b1.png) no-repeat center;
            background-size: 100% 100%;
        }
        .lookmore{
            position: fixed;
            top:675px;
            left:800px;
            display: block;

            line-height: 20px;
            text-align: center;
            color: #a97d4d;
            font-family: fzcjljt;
            font-size: .24rem;
            border: .01rem solid #a97d4d;
            margin: .29rem auto 0;
        }
    </style>
    <style type="text/css">
        .swiper-container{
            --swiper-theme-color: #ff6600;/* 设置Swiper风格 */
            --swiper-navigation-color: #258837;/* 单独设置按钮颜色 */
            --swiper-navigation-size: 300px;/* 设置按钮大小 */
        }
    </style>
</head>
<body>

<div id="app">
    <el-container>
        <el-header>Header</el-header>
        <el-container>
            <el-aside width="200px">Aside</el-aside>
            <el-main>
                <div class="titbox needLangClass zh">
                    <span class="zhtxt">新闻资讯</span>
                    <span class="entxt" style="font-size: .14rem">NEWS</span>
                </div>
                <div class="swiper-container">
                    <div class="swiper-wrapper" >
                        <div class="swiper-slide">
                            <div>
                                <a href="" target="_blank">
                                    <div class="img dmg">
                                        <img src="../imgs/img.png" style="height: 179px">
                                    </div>
                                    <div class="info" style=" position: relative">
                                        <div style="color:#cfc5b5 ;font-size: .12rem ;font-family: fzcjljt"
                                             class="data">
                                            2023.05.19
                                        </div>
                                        <div class="title"
                                             style=" color: #fefefe;font-size: .24rem;text-decoration: none;text-align: left;font-family: fzcjljt;">
                                            下个月见！
                                        </div>
                                        <div style=" color: #ab967d;;font-size:.16rem;" class="noe">
                                            下个月，不见不散
                                        </div>
                                        <span style="color:#ffffff;text-decoration: none;position: absolute; left: 2px ;down:0.01px ;line-height:0;z-index: 99">
                                MORE +</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <a href="" target="_blank">
                                    <div class="img dmg">
                                        <img src="../imgs/img_1.png" style="height: 179px">
                                    </div>
                                    <div class="info" style=" position: relative">
                                        <div style="color:#cfc5b5 ;font-size: .14rem ;"
                                             class="data">
                                            2023.05.4
                                        </div>
                                        <div class="title"
                                             style=" color: #fefefe;font-size: .24rem;text-decoration: none;text-align: left;font-family: fzcjljt;">
                                            如果声音不是用来听的
                                        </div>
                                        <div style=" color: #ab967d;;font-size:.16rem;" class="noe">
                                            那些生活在大时代洪流下的小人物们都发出过怎样的声音呢？
                                        </div>
                                        <span style="color:#ffffff;text-decoration: none;position: absolute; left: 2px ;top :3.1rem ;line-height:0;z-index: 99">
                                MORE +</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <a href="" target="_blank">
                                    <div class="img dmg">
                                        <img src="../imgs/img_2.png" style="height: 179px">
                                    </div>
                                    <div class="info" style=" position: relative">
                                        <div style="color:#cfc5b5 ;font-size: .1rem ;"
                                             class="data">
                                            2023.04.19
                                        </div>
                                        <div class="title"
                                             style=" color: #fefefe;font-size: .24rem;text-decoration: none;text-align: left;font-family: fzcjljt;">
                                            燕云简报 | 奇术，平平无奇的生活小妙招罢了
                                        </div>
                                        <div style=" color: #ab967d;;font-size:.16rem;" class="noe">
                                            一些全新的解题思路，
                                        </div>
                                        <span style="color:#ffffff;text-decoration: none;position: absolute; left: 2px ;top :3.1rem ;line-height:0;z-index: 99">
                                MORE +</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <a href="" target="_blank">
                                    <div class="img dmg">
                                        <img src="../imgs/img_3.png" style="height: 179px">
                                    </div>
                                    <div class="info" style=" position: relative">
                                        <div style="color:#cfc5b5 ;font-size: .1rem ;"
                                             class="data">
                                            2023.04.13
                                        </div>
                                        <div class="title"
                                             style=" color: #fefefe;font-size: .24rem;text-decoration: none;text-align: left;font-family: fzcjljt;">
                                            我和NPC吵起来了，当我尝试融入这个世界……
                                        </div>
                                        <div style=" color: #ab967d;;font-size:.16rem;" class="noe">
                                            能动手的事，还能动嘴？
                                        </div>
                                        <span style="color:#ffffff;text-decoration: none;position: absolute; left: 2px ;top :3.1rem ;line-height:0;z-index: 99">
                                MORE +</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <a href="" target="_blank">
                                    <div class="img dmg">
                                        <img src="../imgs/img_4.png" style="height: 179px">
                                    </div>
                                    <div class="info" style=" position: relative">
                                        <div style="color:#cfc5b5 ;font-size: .1rem ;"
                                             class="data">
                                            2023.03.21
                                        </div>
                                        <div class="title"
                                             style=" color: #fefefe;font-size: .24rem;text-decoration: none;text-align: left;font-family: fzcjljt;">
                                            燕云简报 | 一些肉眼可见的小改进！
                                        </div>
                                        <div style=" color: #ab967d;;font-size:.16rem;" class="noe">
                                            正在努力变得更好！
                                        </div>
                                        <span style="color:#ffffff;text-decoration: none;position: absolute; left: 2px ;top :3.1rem ;line-height:0;z-index: 99">
                                MORE +</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <a href="" target="_blank">
                                    <div class="img dmg">
                                        <img src="../imgs/img_5.png" style="height: 179px">
                                    </div>
                                    <div class="info" style=" position: relative">
                                        <div style="color:#cfc5b5 ;font-size: .1rem ;"
                                             class="data">
                                            2023.02.28
                                        </div>
                                        <div class="title"
                                             style=" color: #fefefe;font-size: .24rem;text-decoration: none;text-align: left;font-family: fzcjljt;">
                                            试玩报名｜实机试玩会下一站，广州！
                                        </div>
                                        <div style=" color: #ab967d;;font-size:.16rem;" class="noe">
                                            广州，我们来啦！
                                        </div>
                                        <span style="color:#ffffff;text-decoration: none;position: absolute; left: 2px ;top :3.1rem ;line-height:0;z-index: 99">
                                MORE +</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <a href="" target="_blank">
                                    <div class="img dmg">
                                        <img src="../imgs/img_6.png" style="height: 179px">
                                    </div>
                                    <div class="info" style=" position: relative">
                                        <div style="color:#cfc5b5 ;font-size: .1rem ;"
                                             class="data">
                                            2023.02.27
                                        </div>
                                        <div class="title"
                                             style=" color: #fefefe;font-size: .24rem;text-decoration: none;text-align: left;font-family: fzcjljt;">
                                            战斗，必须过关！
                                        </div>
                                        <div style=" color: #ab967d;;font-size:.16rem;" class="noe">
                                            燕云十六声，扎起！
                                        </div>
                                        <span style="color:#ffffff;text-decoration: none;position: absolute; left: 2px ;top :3.1rem ;line-height:0;z-index: 99">
                                MORE +</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <a href="" target="_blank">
                                    <div class="img dmg">
                                        <img src="../imgs/img_7.png" style="height: 179px">
                                    </div>
                                    <div class="info" style=" position: relative">
                                        <div style="color:#cfc5b5 ;font-size: .1rem ;"
                                             class="data">
                                            2023.02.03
                                        </div>
                                        <div class="title"
                                             style=" color: #fefefe;font-size: .24rem;text-decoration: none;text-align: left;font-family: fzcjljt;">
                                            试玩报名｜实机试玩会成都站，准备出发！
                                        </div>
                                        <div style=" color: #ab967d;;font-size:.16rem;" class="noe">
                                            我们成都见。
                                        </div>
                                        <span style="color:#ffffff;text-decoration: none;position: absolute; left: 2px ;top :3.1rem ;line-height:0;z-index: 99">
                                MORE +</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <a href="" target="_blank">
                                    <div class="img dmg">
                                        <img src="../imgs/img_8.png" style="height: 179px">
                                    </div>
                                    <div class="info" style=" position: relative">
                                        <div style="color:#cfc5b5 ;font-size: .1rem ;"
                                             class="data">
                                            2023.01.15
                                        </div>
                                        <div class="title"
                                             style=" color: #fefefe;font-size: .24rem;text-decoration: none;text-align: left;font-family: fzcjljt;">
                                            开发组答疑 | 城市试玩计划启动，我们年后见！
                                        </div>
                                        <div style=" color: #ab967d;;font-size:.16rem;" class="noe">
                                            我们会继续努力的！
                                        </div>
                                        <span style="color:#ffffff;text-decoration: none;position: absolute; left: 2px ;top :3.1rem ;line-height:0;z-index: 99">
                                MORE +</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="swiper-slide">
                            <div>
                                <a href="" target="_blank">
                                    <div class="img dmg">
                                        <img src="../imgs/img_9.png" style="height: 179px">
                                    </div>
                                    <div class="info" style=" position: relative">
                                        <div style="color:#cfc5b5 ;font-size: .1rem ;"
                                             class="data">
                                            2023.04.13
                                        </div>
                                        <div class="title"
                                             style=" color: #fefefe;font-size: .24rem;text-decoration: none;text-align: left;font-family: fzcjljt;">
                                            直播预告 | 走！我们去玩燕云十六声！
                                        </div>
                                        <div style=" color: #ab967d;;font-size:.16rem;" class="noe">
                                            滴！元老卡
                                        </div>
                                        <span style="color:#ffffff;text-decoration: none;position: absolute; left: 2px ;top :3.1rem ;line-height:0;z-index: 99">
                                MORE +</span>
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                    <div class="btns j-newsbtn">
                        <div class="swiper-button-prev  swiper-button-disabled" id="newsSwp-prev"></div>
                        <div class="swiper-button-next newsSwp-next"></div>
                    </div>
                </div>
                <div class="pagination"></div>



            </el-main>
            <el-footer>
                <div>
                    <a href="//yysls.cn/news/index.html" class="lookmore" target="_blank" title=" " data-lang="24">查看更多+</a>

                </div>
            </el-footer>
        </el-container>
    </el-container>
</div>
</body>
<!-- import Vue before Element -->
<script src="https://cdn.staticfile.org/vue/2.6.14/vue.min.js"></script>
<!-- import JavaScript -->
<script src="https://cdn.staticfile.org/element-ui/2.15.9/index.min.js"></script>
<!--import swiper.js-->
<script src="../dist/idangerous.swiper.min.js"></script>
<script src="../dist/idangerous.swiper.js"></script>
<script>
    let v = new Vue({
        el: '#app',
        data: function () {
            return {}
        },
        methods: {}
    })
    var mySwiper = new Swiper('.swiper-container', {
        pagination: '.pagination',
        paginationClickable: true,
        slidesPerView: 3,
        loop: true,
        autoplay:true,//等同于以下设置
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },

    })

</script>
<script>
    var mySwiper = new Swiper('swiper-wrapper', {



    });
</script>
</html>